<template>
    <div class="chugui">
        <div class="title">
            <h1><img src="@/assets/index/d-title.png" alt=""></h1>
            <router-link to="/designList">查看更多></router-link>
        </div>
        <div class="body">
            <div class="top">
                <div class="top-img">
                    <img :src="this.data[0].url" alt="">
                </div>
                <div class="top-word">
                    <h1 class="name">
                        <div>{{this.data[0].name}}</div>
                        <router-link to="/designList">
                            <img src="@/assets/index/d-btn.png" alt="">
                        </router-link>
                    </h1>
                    <p class="top-word-1">
                        <span>{{this.data[0].work}}</span>
                        <span>设计经验：{{this.data[0].years}}</span>
                    </p>
                    <p>
                        <span>设计作品：{{this.data[0].work_number}}</span>
                        <span>签约单数：{{this.data[0].sale_number}}</span>
                    </p>
                    <p>
                        擅长设计领域：{{this.data[0].field}}
                    </p>
                    <p>
                        擅长设计风格：{{this.data[0].style}}
                    </p>
                </div>
            </div>
            <div class="bottom">
                <div class="img-box">
                    <img :src="this.data[0].items[0].url2" alt="">
                </div>
            </div>
           
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'

        
export default {
    name: 'chugui',
    data () {
        return {
            username:"",
            phone:"",
            message:'嘉宝官网移动端首页报名',
            description:'嘉宝官网移动端首页报名',
            local:'嘉宝官网移动端首页报名',
           
            litter:[],
            categoryName:'橱柜',
            data:[{
                name: "胡",
                sale_number: 546,
                style: "田园风格",
                work: "总监",
                work_number: 152,
                years: 1,
                filed: "橱柜",
                url: "",
                items:[
                    {
                        url2:''
                    }
                ]

            }]
        }
    },
    computed:{
        ...mapState(['baseUrl'])
    },
    mounted(){
        this.getInfo()
    },
    methods:{
        getInfo(){
        // console.log(this.baseUrl)
            axios.get(this.baseUrl+'cms/design/to_index_news',
                    )
            .then(this.getInfoSucc)
        },
        getInfoSucc(response){
        //   console.log(response)
        this.data = response.data.data
            for(var i =0;i<this.data.length;i++){
                    if(this.data[i].img_url!=null){
                        this.url = this.data[i].img_url.url
                        // console.log(this.url)
                        this.data[i]['url'] = this.url
                    }
                    if(this.data[i].items!=null){
                        for(var b = 0;b<this.data[i].items.length;b++){

                            if(this.data[i].items[b].img_url!=null){
                                let url2 = this.data[i].items[b].img_url.url
                                this.data[i].items[b]['url2'] = url2
                                //  console.log(url2)
                                
                            }
                            this.data[i]['items_firsttitle'] = this.data[i].items[b].first_title
                            this.data[i]['items_hit'] = this.data[i].items[b].hit
                            this.data[i]['items_secondtitle'] = this.data[i].items[b].second_title
                    
                    
                        //  console.log('1')
                        }
                    }

                
                
                }
                // console.log(this.data)
        }

    },
}
</script>


<style lang="stylus" scoped>
// 1rem = html font-size = 50px

@import "~@styles/varibles.styl";
@import "~@styles/mixins.styl";
.chugui 
    background white
    margin-top 0.2rem

    overflow hidden
img 
    width 100%
.title 
    title()
.title>h1
    title_h1()
.title>a
    title_a()
.body 
   chugui_body()
.top 
    margin-top 0.2rem
    width 100% 
    background #f2f2f2
    overflow hidden
.top-img 
    float left
    width 1.8rem    
    height 2.4rem   
    margin 0.2rem
    // background black
.top-word 
    float right
    margin 0.2rem 0.2rem 0 0
    width 4.5rem
.name 
    overflow hidden
.name>div 
    color #333333
    font-size 0.3rem
    float left
.name>a 
    float right
    width 1.6rem
    height 0.37rem
.top-word>p 
     color #333333
     font-size 0.2rem
     margin 0.1rem 0
.top-word>.top-word-1
        margin-top 0.2rem
.img-box 
    display block
    width 100% 
    height 5rem
    // background black
    overflow hidden
    margin-bottom 0.2rem
</style>
